<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page1.css">
    <link rel="stylesheet" href="../css/animate.css">
</head>
<body>
    <div class="page1" id="page1">
        <div class="animation">
            <div class="personA animated fadeInLeft">
                <img src="../images/personA.png" alt="">
            </div>
            <div class="personB animated fadeInRight">
                <img src="../images/personB.png" alt="">
            </div>
        </div>
        <div class="btn">
            <a href="" class="btn1">
                <img src="../images/button1.png" alt="">
            </a>
            <a href="" class="btn2">
                <img src="../images/button2.png" alt="">
            </a>
        </div>
    </div>
    <script>
        window.onload =function () {
            function fullScreen(element) {
                if(element.requestFullScreen) {
                    element.requestFullScreen();
                } else if(element.webkitRequestFullScreen ) {
                    element.webkitRequestFullScreen();
                } else if(element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                }
            }
            var page1 =document.getElementById('page1')
            page1.onclick =function () {
                fullScreen(page1)
            }

        }
    </script>
</body>
</html>